<template>
	<view class="areamode">
		<view @click="show = true" class="area">
			<view class="area_left">
				{{(value.provinceName || '') + (value.cityName  || '')+ (value.areaName || '')||'请选择地区'}}
			</view>
			<image class="area_right" src="../../../static/mine/addressBottom.png" mode="widthFix"></image>
		</view>
		<u-popup :show="show" :round="true" @close="show = false" mode="bottom">
			<view class="areamode_mode">
				<view class="areamode_mode_top">
					<view class="areamode_mode_title">
						请选择地区
					</view>
					<view class="areamode_mode_top_content">
						<view @click="again(1)" :class="type >= 1?'areamode_mode_top_content_list_active':''"
							class="areamode_mode_top_content_list areamode_mode_top_content_list_active">
							<view class="areamode_mode_top_content_list_left">
								<view class="areamode_mode_top_content_list_left_bar"></view>
								<view class="areamode_mode_top_content_list_left_text">
									{{value.provinceName || '请选择省份'}}
								</view>
							</view>
							<view class="areamode_mode_top_content_list_right">
								<image src="../../../static/mine/addressBottom.png" mode="widthFix">
								</image>
							</view>
						</view>
						<view @click="again(2)" :class="type >= 2?'areamode_mode_top_content_list_active':''"
							class="areamode_mode_top_content_list">
							<view class="areamode_mode_top_content_list_left">
								<view class="areamode_mode_top_content_list_left_bar"></view>
								<view class="areamode_mode_top_content_list_left_text">
									{{value.cityName || '请选择城市'}}
								</view>
							</view>
							<view class="areamode_mode_top_content_list_right">
								<image src="../../../static/mine/addressBottom.png" mode="widthFix">
								</image>
							</view>
						</view>
						<view @click="again(3)" :class="type >= 3?'areamode_mode_top_content_list_active':''"
							class="areamode_mode_top_content_list">
							<view class="areamode_mode_top_content_list_left">
								<view class="areamode_mode_top_content_list_left_bar"></view>
								<view class="areamode_mode_top_content_list_left_text">
									{{value.areaName || '请选择县区'}}
								</view>
							</view>
							<view class="areamode_mode_top_content_list_right">
								<image src="../../../static/mine/addressBottom.png" mode="widthFix">
								</image>
							</view>
						</view>
					</view>
				</view>
				<scroll-view class="areamode_mode_bottom" scroll-y="true">
					<view class="areamode_mode_bottom_title">
						请选择省份（城市/区）
					</view>
					<view class="areamode_mode_bottom_content">
						<view @click="bootdistrictselect(item.id ,item.name)" v-for="(item,index) in list"
							class="modeBox_list">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		bootdistrictselect
	} from '@/api/home'
	export default {
		data() {
			return {
				show: false,
				list: [],
				type: 1,
				obj: this.value || {},
				// province: '',
				// provinceName: '',
				// city: '',
				// cityName: '',
				// area: '',
				// areaName: ''
			}
		},
		props: {
			value: {
				default: {}
			}
		},
		created() {
			if (this.value.id) {
				this.type = 3
				this.bootdistrictselect(this.value.area, this.value.areaName)
			} else {
				this.bootdistrictselect(0)
			}
		},
		methods: {
			again(type) {
				if (type == this.type) {

					return
				}
				if (type === 1) {
					this.type = type;
					this.value.city = '';
					this.value.cityName = '';
					this.value.area = '';
					this.value.areaName = '';
					this.$emit('change', '')
					this.bootdistrictselect(0)
				}
				if (type === 2) {
					this.type = type;
					this.value.area = '';
					this.value.areaName = '';
					this.$emit('change', '')
					this.bootdistrictselect(this.value.province, this.value.cityName, true)
				}
			},
			bootdistrictselect(id, name, type) {
				if (this.type != 3) {
					this.list = []
				}
				bootdistrictselect(id).then(res => {
					if (this.type != 3) {
						this.list = res.data
					}
					if (id === 0) {
						return
					}
					if (this.type == 1) {
						this.type++
						this.value.province = String(id)
						this.value.provinceName = String(name)
						this.value.city = '';
						this.value.cityName = '';
						this.value.area = '';
						this.value.areaName = '';
						this.$emit('change', '')
					} else if (this.type == 2) {
						if (type == true) {
							return
						}
						this.type++
						this.value.city = String(id)
						this.value.cityName = String(name)
						this.value.area = '';
						this.value.areaName = '';
						this.$emit('change', '')
					} else if (this.type == 3) {
						this.value.area = String(id)
						this.value.areaName = String(name)
						this.$emit('change', '')
						this.show = false
					}
					this.$forceUpdate()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.areamode {
		width: 100%;
	}

	.area {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		.area_left {
			font-size: 28upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 40upx;
			width: calc(100% - 28upx - 20upx);
		}

		.area_right {
			width: 28upx;
		}
	}



	.areamode_mode {
		width: 100%;
		height: 80vh;

		.areamode_mode_top {
			height: 450upx;
			border-bottom: 2upx solid #B9B9B9;
			overflow: hidden;

			.areamode_mode_title {
				font-size: 36upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 50upx;
				margin-top: 40upx;
				text-align: center;
			}

			.areamode_mode_top_content {
				margin-top: 56upx;

				.areamode_mode_top_content_list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 42upx;
					margin-bottom: 38upx;

					.areamode_mode_top_content_list_left {
						display: flex;
						align-items: center;

						.areamode_mode_top_content_list_left_bar {
							width: 16upx;
							height: 16upx;
							border-radius: 100%;
							background: #D8D8D8;
						}

						.areamode_mode_top_content_list_left_text {
							margin-left: 32upx;
							font-size: 36upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #000000;
							line-height: 50upx;
						}
					}

					.areamode_mode_top_content_list_right {
						image {
							width: 28upx;
						}
					}
				}

				.areamode_mode_top_content_list_active {
					.areamode_mode_top_content_list_left_text {
						color: #FFBE53 !important;
					}

					.areamode_mode_top_content_list_left_bar {
						background-color: #FFBE53 !important;
					}
				}
			}
		}

		.areamode_mode_bottom {
			height: calc(100% - 450upx);

			.areamode_mode_bottom_title {
				font-size: 36upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 50upx;
				// text-align: center;
				padding-top: 20upx;
				padding-left: 40upx;
			}

			.areamode_mode_bottom_content {
				margin-top: 88upx;

				.modeBox_list {
					padding: 20upx 80upx;
					margin-bottom: 20upx;
				}
			}
		}
	}
</style>
